{% extends 'base.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
{% endblock %}


{% block nav %}
    <a href="{% url 'main:index' %}"><img class="head-icon" src="{% static 'images/head-icon.ico' %}" alt="ExtraXue"/></a>
    <a href="{% url 'main:index' %}" class="site-title dot mt-3">Extra Xue</a>
    <span class="site-slogan">Operator, Developer</span>

    <!-- navigation menu -->
    <nav>
        <ul class="vertical-menu scrollspy">
            <li><a href="#home" class="active"><i class="icon-home"></i>Home</a></li>
            <li><a href="#article"><i class="icon-user"></i>Article</a></li>
        </ul>
    </nav>

    <!-- footer -->
    <div class="footer mt-auto">

        <!-- social icons -->
        <ul class="social-icons list-inline">
            <li class="list-inline-item"><a href="https://gitee.com/extraxue"><i class="fab fa-github"></i></a></li>
            <li class="list-inline-item"><a href="https://twitter.com/ExtraXue"><i class="fab fa-twitter"></i></a></li>
            <li class="list-inline-item"><a href="https://www.instagram.com/extraxue26"><i class="fab fa-instagram"></i></a></li>
        </ul>

        <!-- copyright -->
        <span class="copyright">© 2020 ExtraXue</span>
    </div>


{% endblock %}


{% block content %}

    <main class="content float-right">
        <!-- section hero -->
        <section class="hero parallax shadow-lg d-flex align-items-center" id="home" >
            <div class="cta mx-auto mt-2">
                <h1 class="mt-0 mb-4">I'm Extra Xue<span class="dot"></span></h1>
                <p class="mb-4">[[ mottos.m_words ]]</p>
                <a href="http://extraxue.gitee.io/extraxue-markdown-cv/" class="btn btn-default btn-lg mr-3" target="_blank">
                    <i class="icon-grid"></i>查看简历
                </a>
                <div class="spacer d-md-none d-lg-none d-sm-none" data-height="10"></div>
                <a href="mailto:howardxue123@foxmail.com" class="btn btn-border-light btn-lg"><i class="icon-envelope"></i>联系我</a>
            </div>
            <div class="overlay"></div>
        </section>

        <!-- section works -->
        <section id="article" class="shadow-blue white-bg padding">
            <h3 class="section-title">文章</h3>
            <div class="spacer" data-height="30"></div>
            <!-- 文章目录展现 (PC) -->
            <ul class="portfolio-filter list-inline">
                <li class="current list-inline-item" @click="switch_isLoaded_tag(),fetchariticle_default(1)">最近访问</li>
                <li v-for="(menu,index) in article_menus"  class="list-inline-item"
                     @click="switch_isLoaded_tag(),fetcharticle_cate(menu.menu_code)"> [[menu.menu_name]]
                </li>
            </ul>

            <!--
            todo:
                show the article lists by using mobile-end menu is not avaliable yet
            -->
            <!-- 文章目录展现 (移动设备) -->
            <div class="pf-filter-wrapper mb-4">
                <select class="portfolio-filter-mobile">
                    <option value="*">最近访问</option>
                    <option v-for="(menu) in article_menus" :value="[['.'+menu.menu_code.toLowerCase()]]">
                        [[menu.menu_name]]
                    </option>
                </select>
            </div>


            <!-- portolio wrapper -->
            <div class="row portfolio-wrapper-unit">
                <div v-if= "!is_loaded" class="loading-pic">
                    <img :src="loading_pic" alt="loading">
                </div>
                <!-- portfolio item -->
                <div v-if= "is_loaded" v-for="(article,key) in article_lists"
                     :class="['col-md-4','col-sm-6','grids-item']" :key="key">
                    <a :href="'../article/'+[[article.pk]]">
                        <div class="portfolio-item">
                            <div class="details">
                                <h4 class="title">[[ article.article_name ]]</h4>
                            </div>
                            <span class="plus-icon">→</span>
                            <div class="thumb">
                                <img :src="'../static/uploads'+[[ article.article_image ]]" alt="[[article.article_name]]"/>
                                <div class="mask"></div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <!-- more button -->
            <div class="load-more text-center mt-4">
                <a href="javascript:" class="btn btn-default"><i class="fas fa-circle-notch"></i>展现更多</a>
                <!-- numbered pagination (hidden for infinite scroll) -->
                <ul class="portfolio-pagination list-inline d-none">
                    <li class="list-inline-item">1</li>
                    <li class="list-inline-item"><a href="works-2.html">2</a></li>
                </ul>
            </div>
        </section>
    </main>



{% endblock %}


{% block ext_js %}

    {{ block.super }}

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <script src="{% static 'js/home_vue.js' %}"></script>

{% endblock %}
